<route>
    {
        meta: {
            title: "创建个人文件夹"
        }
    }
    </route>

<script setup name="personalFileList">
import QRCode from "qrcode"
import useFileStore from '@/store/modules/file'
import { nextTick, ref, onMounted } from 'vue'
import { ElInput } from 'element-plus'
const route = useRoute()
const router = useRouter()
const o = ref(JSON.parse(route.query.o));
const thisFile = ref(JSON.parse(route.query.thisFile));
const QRCode_header = ref(null);
const qrurl = ref("");
const qrBaseUrl = ref("http://192.192.41.22:8000/#/publicize_example/qrCode")

const fileStore = useFileStore()

const formRef = ref()
const form = ref({
    share: JSON.parse(route.query.o).share
})
// 类型
const radio1 = ref('1')
// 规则
const rules = ref({
    name: [
        { required: true, message: '请输入文件夹名称', trigger: 'blur' }
    ]
})

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {
            let obj = {
                fileId: o.value.id,
                name: o.value.name,
                parentId: thisFile.value.id,
                share: form.value.share,
                tagIds: o.value.tags.map(item => item.id)
            }
            fileStore.editFile(obj).then(() => {
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
                router.go(-1)
            }).catch(() => {})
        }
    })
}

function onCancel() {
    router.go(-1)
}

function printCanvas() {
    var canvas = document.getElementById("myCanvas");

    // 将Canvas内容转换为图像数据
    var imageData = canvas.toDataURL('image/png');

    // 创建一个新的图像元素
    var img = new Image();
    img.src = imageData;

    // 打开一个新窗口，并将图像元素添加到新窗口中
    var printWindow = window.open();
    printWindow.document.write('<html><head><title>Print Canvas</title></head><body>');
    printWindow.document.write('<img src="' + imageData + '" />');
    printWindow.document.write('</body></html>');
    printWindow.document.close();

    // 等待图像加载完成后触发打印
    img.onload = function() {
        printWindow.print();
        printWindow.close();
    };
}

onMounted(() => {
    changeQRCode()
    qrBaseUrl.value = location.href.split("#")[0] + '#/publicize_example/qrCode'
})

const changeQRCode = () => {
    setTimeout(() => {
      qrurl.value = `${qrBaseUrl.value}?fileId=${o.value.id}`
      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 0, //二维码留白边距
        width: 280, //宽
        height: 280, //高
        text: "https://www.bilibili.com/", //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(QRCode_header.value, qrurl.value, opts, function (error) {
        if (error) {
          console.log("二维码加载失败", error);
        }
      });      
    })
}
</script>

<template>
    <div>
        <page-header :title="o.name">
            <template #content>
                <p>共享文件</p>
            </template>
        </page-header>
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="是否共享" prop="share">
                            <el-radio-group v-model="form.share" class="ml-4">
                                <el-radio :label="true">开启</el-radio>
                                <el-radio :label="false">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="共享链接二维码">
                            <div style="display: flex;justify-content: center;">
                                <canvas id="myCanvas" ref="QRCode_header" style="width: 280px; height: 280px"></canvas>        
                            </div>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">完成</el-button>
            <el-button type="primary" size="large" @click="printCanvas">打印</el-button>
            <el-button type="primary" size="large" @click="onCancel">取消</el-button>
        </fixed-action-bar>
    </div>
</template>
